
import React, { useState, useEffect, useRef } from 'react';
import './Carousel.css';
import Authenticfont from '../../assets/images/正版字体.png';
import Rushing from '../../assets/images/奔赴盛夏.jpeg';
import { Dropdown, Space, Tabs } from 'antd';
import type { TabsProps } from 'antd';

import { getList } from '../../request/index'
interface CarouselProps {
    TITLE: React.ReactNode;
    TITLE1: React.ReactNode;
}
const Carousel: React.FC<CarouselProps> = ({ TITLE, TITLE1 }) => {
    const [data1, setData1] = useState([])
    useEffect(() => {
        getList().then(res => {
            setData1(res.data)
        })
    }, [])


    const [Search, setSearch] = useState('');

    // Determine filtered data
    const filteredData = Search
        ? data1.filter(item =>
            item.includes(Search)
        )
        : [];

    // 关键词高亮
    const highlightText = (text, highlight) => {
        if (!highlight.trim()) return text;
        const regex = new RegExp(`(${highlight})`, 'gi');
        return text.split(regex).map((part, index) =>
            regex.test(part) ? <span key={index} className="highlight">{part}</span> : part
        );
    };
    // 鼠标点击显示
    const onChange = (key: string) => {
        console.log(key);
    };

    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '模版',
            children: (
                <div className='TabsChildren'>
                    <h5 style={{ color: "#666" }}>热门搜索</h5>
                    <div className='moban'>
                        <p><span className='hui guanjun'>1</span>中秋</p>
                        <p><span className='hui jijun'>2</span>中秋节</p>
                        <p><span className='hui yajun'>3</span>国庆</p>
                        <p><span className='hui'>4</span>中秋节放假通知</p>
                        <p><span className='hui'>5</span>喜报</p>
                        <p><span className='hui'>6</span>中秋海报</p>
                    </div>
                </div>
            ),
        },
        {
            key: '2',
            label: '素材',
            children: (
                <ul className='uull'>
                    {filteredData.length > 0 ? (
                        filteredData.map((item, index) => (
                            <li key={index}>{highlightText(item, Search)}</li>
                        ))
                    ) : (
                        <p>没有记录</p>
                    )}
                </ul>
            ),
        },
        {
            key: '3',
            label: '我的设计',
            children: (
                <div className='TabsChildren'>
                    <h5 style={{ color: "#666" }}>设计</h5>
                    <div className='sheji'>
                        <img src="https://pub-cdn-oss.chuangkit.com/design/2024/09/11/4a2d3f82-c500-4b43-bab2-fbace1ca9b44_thumb" alt="" />
                        <div>
                            <h3 style={{ fontWeight: "500" }}>中秋节活动邀请函</h3>
                            <p style={{ color: "#666" }}>720 X 1280 px</p>
                        </div>
                    </div>
                    <div className='sheji'>
                        <img src="https://pub-cdn-oss.chuangkit.com/design/2024/09/11/c7fcd4b5-c8d0-4440-aa24-6bafb2d29cd3_thumb" alt="" />
                        <div>
                            <h3 style={{ fontWeight: "500" }}>中秋节活动邀请函</h3>
                            <p style={{ color: "#666" }}>720 X 1280 px</p>
                        </div>
                    </div>
                    <div className='sheji'>
                        <img src="https://pub-cdn-oss.chuangkit.com/design/2024/09/11/6119b746-8cdc-4878-9318-978e0146b987_thumb" alt="" />
                        <div>
                            <h3 style={{ fontWeight: "500" }}>中秋节活动邀请函</h3>
                            <p style={{ color: "#666" }}>720 X 1280 px</p>
                        </div>
                    </div>
                </div>
            ),
        },
    ];


    const [index, setIndex] = useState(0);
    const ulRef = useRef<HTMLUListElement>(null);
    const zuoRef = useRef<HTMLSpanElement>(null);
    const youRef = useRef<HTMLSpanElement>(null);
    const intervalRef = useRef<NodeJS.Timeout | null>(null);
    const startAutoPlay = () => {
        if (intervalRef.current) {
            clearInterval(intervalRef.current);
        }
        intervalRef.current = setInterval(() => {
            setIndex((prevIndex) => (prevIndex + 1) % 2);
        }, 3000);
    };
    // 鼠标悬停时，停止自动播放并显示箭头
    const handleMouseOver = () => {
        if (zuoRef.current && youRef.current) {
            zuoRef.current.style.left = '10px';
            youRef.current.style.right = '10px';
            // 清除自动播放定时器
            if (intervalRef.current) {
                clearInterval(intervalRef.current);
            }
        }
    };
    // 鼠标离开时，重新启动自动播放并隐藏箭头
    const handleMouseOut = () => {
        if (zuoRef.current && youRef.current) {
            zuoRef.current.style.left = '-50px';
            youRef.current.style.right = '-50px';
            startAutoPlay();
        }
    };
    // 定义一个处理箭头点击事件的函数，参数为方向，可以是'prev'或'next'
    const handleArrowClick = (direction: 'prev' | 'next') => {
        // 使用setIndex函数更新索引值
        setIndex((prevIndex) => {
            // 根据方向参数计算新的索引值
            const newIndex = direction === 'prev' ? (prevIndex - 1 + 2) % 2 : (prevIndex + 1) % 2;
            // 返回新的索引值
            return newIndex;
        });
    };
    // useEffect是一个React Hook，用于在函数组件中处理副作用
    useEffect(() => {
        // 调用startAutoPlay函数，开始自动播放
        startAutoPlay();
        // 返回一个函数，用于清除副作用
        return () => {
            // 如果intervalRef.current存在，则清除定时器
            if (intervalRef.current) {
                clearInterval(intervalRef.current);
            }
        };
    }, []);


    return (
        <div
            className="Carousel"
            onMouseOver={handleMouseOver}
            onMouseOut={handleMouseOut}
        >
            <div className='xxxxxxxxxxxxxxxx'>
                <ul ref={ulRef} className='ul'>
                    <li className={index === 0 ? 'visible' : ''}><img src={Rushing} alt="Authentic Font" /><div className="caption">{TITLE}</div></li>
                    <li className={index === 1 ? 'visible' : ''}><img src={Authenticfont} alt="Rushing to Summer" /><div className="caption">{TITLE1}</div></li>
                </ul>
                <span ref={zuoRef} className="zuo" onClick={() => handleArrowClick('prev')}>&lt;</span>
                <span ref={youRef} className="you" onClick={() => handleArrowClick('next')}>&gt;</span>
                <div className="inp">
                    <Dropdown trigger={['click']} dropdownRender={
                        menu => (
                            <div className='message'>
                                <Tabs defaultActiveKey="1" items={items} onChange={onChange} centered={true} tabBarGutter={100} />
                            </div>
                        )
                    }>
                        <a onClick={(e) => e.preventDefault()}>
                            <Space>
                                <input type="text" placeholder='搜索你想要的素材' className='input' value={Search} onChange={e => setSearch(e.target.value)} />

                            </Space>
                        </a>
                    </Dropdown>

                    <div className="searchfor">搜索</div>
                </div>
            </div>

        </div>
    );
};
export default Carousel;